<template>
  <div>
    <search-hander @handleSearch="handleSearch" />
    <div class="main">
      <div class="btnBox">
        <el-button class="btn" @click="addDevice">
          <i class="el-icon-circle-plus-outline" />
          新建
        </el-button>
        <el-button class="configBtn" @click="setDevicePrice">
          批量操作
        </el-button>
      </div>
      <el-table :data="vmList" @selection-change="selectDevice">
        <el-table-column type="selection" width="55" />
        <el-table-column label="序号" width="90">
          <template v-slot="{$index}">
            {{ ($index + 1) + (params.pageIndex - 1) * 10 }}
          </template>
        </el-table-column>
        <el-table-column prop="innerCode" label="设备编号" />
        <el-table-column prop="type.name" label="设备型号" />
        <el-table-column prop="node.name" label="详细地址" />
        <el-table-column prop="ownerName" label="合作商" />
        <el-table-column label="设备状态">
          <template v-slot="{row}">
            {{ vmStatusArr[row.vmStatus] }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{row}">
            <el-button type="text" @click="showHd(row)">货道</el-button>
            <el-button type="text" @click="showStrategy(row)">策略</el-button>
            <el-button type="text" @click="editDevice(row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row v-if="totalPage > 1" align="middle" justify="space-between" style="height: 60px" type="flex">
        <span style="color: #dbdfe5">共{{ totalCount }}条记录  第 {{ params.pageIndex }}/{{ totalPage }} 页</span>
        <el-pagination
          :current-page="params.pageIndex"
          :page-size="params.pageSize"
          :total="+totalCount"
          layout="prev, next"
          next-text="下一页"
          prev-text="上一页"
          @current-change="changePage"
        />
      </el-row>
    </div>
    <el-dialog title="批量策略管理" :visible.sync="dialogVisible" width="30%">
      <el-form label-position="top">
        <el-form-item label="选择策略">
          <el-select v-model="policyId" placeholder="请选择">
            <el-option v-for="(item, index) in policyList" :key="index" :label="item.policyName" :value="item.policyId" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="新增设备" :visible.sync="showAddDialog" width="30%" @close="close">
      <el-form label-position="left" label-width="100px">
        <el-form-item label="设备编号：">
          <span>系统自动生成</span>
        </el-form-item>
        <el-form-item label="选择型号：">
          <el-select v-model="vmType" placeholder="请选择">
            <el-option v-for="(item, index) in vmTypeList" :key="index" :label="item.name" :value="item.typeId" />
          </el-select>
        </el-form-item>
        <el-form-item label="选择点位：">
          <el-select v-model="nodeId" placeholder="请选择">
            <el-option v-for="(item, index) in nodeList" :key="index" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showAddDialog = false">取消</el-button>
        <el-button type="primary" @click="submitAdd">确认</el-button>
      </div>
    </el-dialog>
    <el-dialog title="策略管理" :visible.sync="showStrategyDialog" width="30%">
      <span>机器编号：{{ vmPolicy.innerCode }}</span>
      <span>策略名称：{{ vmPolicy.policyName }}</span>
      <p>策略方案：{{ vmPolicy.discount }}%</p>
      <el-button @click="cancelStrategy">
        取消策略
      </el-button>
    </el-dialog>
    <el-dialog width="30%" :visible.sync="editDeviceDialog" title="修改设备" @close="close">
      <p>机器编号：{{ vmPolicy.innerCode }}</p>
      <p>供货时间：{{ vmPolicy.updateTime }}</p>
      <p>设备类型：{{ type.name }}</p>
      <p>设备容量：{{ type.vmCol }}</p>
      <div>
        <span>设备点位：</span>
        <el-select v-model="nodeId" placeholder="请选择">
          <el-option v-for="(item, index) in nodeList" :key="index" :label="item.name" :value="item.id" />
        </el-select>
      </div>
      <p>合作商：{{ vmPolicy.ownerName }}</p>
      <p>所属区域：{{ region.name }}</p>
      <p>设备地址：{{ node.name }}</p>
      <el-button @click="editDeviceDialog = false">取消</el-button>
      <el-button @click="putDeviceNode">确认</el-button>
    </el-dialog>
    <!-- <set-hd v-if="showSetHd" @closeChannel="showSetHd=false" /> -->
    <el-dialog title="货道设置" :visible.sync="showSetHd" style="overflow: hidden;" width="1000px">
      <div class="goodsTitle">
        <div class="goodsText">
          <p>货道行数：<span>6</span></p>
          <p>货道列数：<span>6</span></p>
          <p>货道容量(个)：<span>6</span></p>
        </div>
        <el-button type="primary">智能排货</el-button>
      </div>
      <div class="scroll-wrapper">
        <el-scrollbar ref="scrollbar" class="goodsbox">
          <!-- <div v-for="cow in typeList.vmRow" :key="cow" style="display: flex;"> -->
          <div v-for="col in typeList.vmCol" :key="col" class="skuBox">
            <el-col v-for="item in shopList" :key="item.channelCode" style="padding-left: 8px; padding-right: 8px;">
              <div class="item">
                <div class="code">{{ item.channelCode }}</div>
                <div class="sku">
                  <img :src="item?.sku?.skuImage" class="img">
                  <div class="name">
                    {{ item?.sku?.skuName }}
                  </div>
                </div>
                <div class="bottom clearfix">
                  <el-button type="text" class="button">操作按钮</el-button>
                </div>
              </div>
            </el-col>
            <!-- </div> -->
          </div>
          <div class="prev" @click="prev">
            <i class="el-icon-arrow-left" />
          </div>
          <div class="next" @click="next">
            <i class="el-icon-arrow-right" />
          </div>
        </el-scrollbar>
      </div>
      <div class="queren">
        <el-button>确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getChannelList, getVmType, putDeviceNode, getVmPolicy, cancelPolicy, addDevice, getVmList, getPolicyList, useApplyPolicy, getNodeList, getVmTypeList } from '@/api/vmindex'
import SearchHander from '@/components/SearchHander/index.vue'
import { vmStatusArr } from '@/api/constants'
// import SetHd from './components/setHd.vue'
export default {
  components: {
    SearchHander
    // SetHd
  },
  data() {
    return {
      setScrollLeft: 0,
      showSetHd: false,
      showStrategyDialog: false,
      policyId: null,
      dialogVisible: false,
      total: 0,
      totalPage: 0,
      totalCount: 0,
      vmStatusArr: vmStatusArr,
      vmList: [],
      params: {
        pageIndex: 1,
        pageSize: 10
      },
      deviceList: [],
      policyList: [],
      nodeList: [],
      vmTypeList: [],
      showAddDialog: false,
      vmType: null,
      nodeId: null,
      vmPolicy: {},
      editDeviceDialog: false,
      innerCodeList: [],
      type: {},
      region: {},
      node: {},
      typeList: [],
      shopList: []
    }
  },
  created() {
    this.getVmList()
  },
  methods: {
    next() {
      const scrollbar = this.$refs.scrollbar
      // console.log(scrollbar)
      // 向右滚动 20px
      scrollbar._data.moveX = 100
    },
    prev() {
      const scrollbar = this.$refs.scrollbar
      console.log(scrollbar)
      // 向右滚动 20px
      scrollbar._data.moveX = 0
    },
    async showHd(row) {
      const res = await getVmType(row.type.typeId)
      this.typeList = res
      const res1 = await getChannelList(row.innerCode)
      this.shopList = res1
      console.log(this.shopList)
      console.log(this.typeList)
      this.showSetHd = true
    },
    async putDeviceNode() {
      // 修改点位 接口写错了。。。
      // await putDeviceNode({
      //   id: this.vmPolicy.id,
      //   name: this.vmPolicy.type.name,
      //   addr: this.vmPolicy.node.addr,
      //   areaCode: this.vmPolicy.node.areaCode,
      //   regionId: this.vmPolicy.regionId,
      //   businessId: this.vmPolicy.node.businessId,
      //   ownerId: this.vmPolicy.ownerId,
      //   ownerName: this.vmPolicy.ownerName
      // })
      await putDeviceNode({
        id: this.vmPolicy.id,
        nodeId: this.nodeId
      })
      this.$message.success('修改成功')
      this.getVmList()
      this.editDeviceDialog = false
    },
    async editDevice(row) {
      console.log(row)
      this.vmPolicy = row
      this.type = row.type
      this.region = row.region
      this.node = row.node
      this.nodeId = row.nodeId
      const res = await getNodeList()
      this.nodeList = res.currentPageRecords
      this.editDeviceDialog = true
    },
    close() {
      this.nodeId = null
      this.vmType = null
    },
    async cancelStrategy() {
      console.log(this.vmPolicy)
      await cancelPolicy(this.vmPolicy)
      this.$message.success('取消成功')
      this.showStrategyDialog = false
      this.getVmList()
    },
    async showStrategy(row) {
      this.deviceList.push(row)
      const res = await getVmPolicy(row.innerCode)
      this.$nextTick(() => {
        this.vmPolicy = res
        console.log(this.vmPolicy)
        if (this.vmPolicy) {
          this.showStrategyDialog = true
        } else {
          console.log(this.innerCodeList)
          this.shishandaima()
        }
      })
    },
    async submitAdd() {
      if (!this.vmType) return this.$message.warning('请选择设备型号')
      if (!this.nodeId) return this.$message.warning('请选择点位')
      await addDevice({
        vmType: this.vmType,
        nodeId: this.nodeId,
        createUserId: 1
      })
      this.$message.success('新增成功')
      this.showAddDialog = false
      this.getVmList()
    },
    async addDevice() {
      const res1 = await getVmTypeList()
      const res = await getNodeList()
      this.vmTypeList = res1.currentPageRecords
      this.nodeList = res.currentPageRecords
      this.showAddDialog = true
    },
    async submit() {
      if (!this.policyId) return this.$message.warning('请选择策略')
      this.innerCodeList = this.deviceList.map(item => item.innerCode)
      await useApplyPolicy({
        policyId: this.policyId,
        innerCodeList: this.innerCodeList
      })
      this.dialogVisible = false
      this.$message.success('操作成功')
      this.getVmList()
    },
    async setDevicePrice() {
      if (this.deviceList.length === 0) return this.$message.warning('请勾选售货机')
      const res = await getPolicyList()
      this.policyList = res
      this.dialogVisible = true
    },
    async shishandaima() {
      const res = await getPolicyList()
      this.policyList = res
      this.dialogVisible = true
    },
    selectDevice(row) {
      this.deviceList = row
    },
    handleSearch(searchText) {
      this.params.pageIndex = 1
      this.params.innerCode = searchText
      this.getVmList()
    },
    async changePage(page) {
      this.params.pageIndex = page
      await this.getVmList()
    },
    async getVmList() {
      const res = await getVmList(this.params)
      this.vmList = res.currentPageRecords
      this.totalPage = res.totalPage
      this.totalCount = res.totalCount
    }
  }
}
</script>

<style lang='scss' scoped>
.main{
  width: 100%;
  height: 693px;
  padding: 20px;
  background-color: #fff;
  margin-bottom: 70px;
}
.btnBox {
  display: flex;
  padding-bottom: 20px;
}
.btn {
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 80px ;
  height: 36px;
  padding: 0;
  background: linear-gradient(135deg, #ff9743, #ff5e20) ;
  border: none;
  color: white;
}
.configBtn{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px ;
  height: 36px;
  text-align: center;
  padding: 0;
  background-color: #f3e7e1;
}
::v-deep .el-table td, .el-table th {
  padding: 3px 0;
}
::v-deep .el-table td, .el-table th.is-leaf{
  border-bottom: 0;
}
::v-deep .el-pagination button {
width: 70px;
height: 32px;
margin: 0 16px;
border-radius: 2px;
background-color: #d5ddf8;
}
::v-deep .btn-prev:disabled {
background: #edf0f9;
}
.goodsTitle{
  display: flex;
  justify-content: space-between;
  background-color: #f3f6fb;
  height: 70px;
  align-items: center;
  margin-bottom: 20px;
  .goodsText{
    display: flex;
    p{
      margin-right: 60px;
      color: #606266;
    }
  }
}
.scroll-wrapper{
  margin: 0;
  overflow-x: hidden;
  box-sizing: border-box;
  scroll-behavior: smooth;
   .goodsbox{
   position: relative;
   width: 800px;
   height: 385px;
   margin: 0 auto;
  .skuBox{
    margin: 5px;
    width: 150px;
    height: 180px;
    background-color: pink;
    display: inline-block;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 4px;
   }
  }
}
::v-deep .el-scrollbar__wrap{
  overflow-x: hidden;
}
.prev{
  z-index: 6;
  top: 44%;
  left: -1%;
  position: absolute;
  width: 50px;
  height: 50px;
  // background-color: pink;
  .el-icon-arrow-left{
    font-size: 50px;
    color: #333;
  }
}
.next{
  z-index: 6;
  top: 44%;
  right: -1%;
  position: absolute;
  width: 50px;
  height: 50px;
  // background-color: pink;
  .el-icon-arrow-right{
    font-size: 50px;
    color: #333;
  }
}
.queren{
  margin: 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  .el-button{
    width: 100px;
    height: 40px;
    background-color: #ff722c;
    border-radius: 4px;
    color: #fff;
  }
}
.item {
  position: relative;
  width: 150px;
  height: 180px;
  background: #fff;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.06);
  border-radius: 4px;
  text-align: center;
  .code {
    position: absolute;
    top: 10px;
    left: 0;
    width: 43px;
    height: 23px;
    line-height: 23px;
    background: #829bed;
    border-radius: 0 10px 10px 0;
    font-size: 12px;
    color: #fff;
  }
  .sku {
    height: 135px;
    padding-top: 16px;
    background-color: #f6f7fb;
    border-radius: 4px;
    .img {
      display: inline-block;
      width: 84px;
      height: 78px;
      margin-bottom: 10px;
      -o-object-fit: contain;
      object-fit: contain;
    }
    .name {
      padding: 0 16px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
</style>
